<!--
 * @FilePath: EchartsInit.vue
 * @Description: 
-->
<template>
    <div class="echarts-contianer" ref="myChart"> </div>
</template>
<script lang="ts" setup>
import { ref, watch, markRaw, onMounted, nextTick, onUnmounted } from 'vue'
import * as echarts from 'echarts';
import 'echarts-gl';

const props = defineProps({
    options: {
        type: Object,
        default: () => { },
    },
});

const myChart = ref();
let iEcharts: any = ref();

const hideLoading = () => {
    iEcharts.value?.hideLoading();
};
const update = (option: any) => {
    iEcharts.value?.clear();
    iEcharts.value?.setOption(option);
    hideLoading();
};
const boot = () => {
    if (!props.options) {
        return;
    }
    const echartsInstance = markRaw(echarts.init(myChart.value, '', { renderer: 'svg' }));
    echartsInstance.setOption(props.options);
    iEcharts.value = echartsInstance;

    update(props.options);
};

defineExpose({
    iEcharts,
});
watch(
    () => props.options,
    (newOptions) => {
        setTimeout(() => {
            boot(newOptions);
            // console.log(11111, newOptions)

        }, 0);
    },
    { immediate: false, deep: true }
);

onMounted(() => {
    nextTick(() => {
        boot();
    });
    window.addEventListener('resize', function () {
        iEcharts.value.resize();
    });
});

onUnmounted(() => {
    iEcharts.value?.dispose();
});
</script>
<style scoped>
.echarts-contianer {
    width: 100%;
    height: 100%;
}
</style>
